<template>
  <v-container fluid class="flex p-3 h-full w-full">
    <el-tabs @tab-click="onTabChange" v-model="tabActive" class="h-full grow flex flex-col tabs" type="border-card">
      <el-tab-pane label="项目配置">
        <router-view v-if="tabif === '0'"/>
      </el-tab-pane>
      <el-tab-pane class="h-full" label="环境配置">
        <router-view v-if="tabif === '1'"/>
      </el-tab-pane>
      <!-- <el-tab-pane label="角色管理">
        <router-view />
      </el-tab-pane>
      <el-tab-pane label="定时任务补偿">
        <router-view />
      </el-tab-pane> -->
    </el-tabs>
  </v-container>
</template>


<script>
import { nextTick, ref } from '@vue/composition-api'
import router from '../../../../router'
import { useApiStore } from "@/store/api";
export default {
    setup() {
        const route = router.currentRoute
        const apiStore = useApiStore()
        const tabActive = ref(null)
        const tabif = ref(null)

        if (route.name === 'setup-common') {
          tabActive.value = '0'
          tabif.value = '0'
        } else if (route.name === 'setup-env') {
          tabActive.value = '1'
          tabif.value = '1'
        }

        function onTabChange() {
          tabif.value = null
          nextTick(() => {
            if (tabActive.value === '0') {
                router.replace({
                    name: 'setup-common',
                    query: {
                        projectId: apiStore.projectId,
                    }
                }, () => {tabif.value = '0'})
            } else if (tabActive.value === '1') {
                router.replace({
                    name: 'setup-env',
                    query: {
                        projectId: apiStore.projectId,
                    }
                }, () => { tabif.value = '1' })
            }
          })
        }

        return {
            tabActive,
            tabif,
            onTabChange,
        }
    }
}
</script>

<style scoped>
.tabs >>> .el-tabs__content {
  height: 100%;
}
</style>